<template>
  <div class="rechargeAmount">
    <div class="rechargeAmount-top">
      <div class="rechargeAmount-top-left">企业充值金额
        (<span>{{totalsum || 0}}元</span>)</div>
      <button class="rechargeAmount-top-right" @click="importData()">导出</button>
    </div>
    <div class="rechargeAmount-main">
      <div class="rechargeAmount-main-top">
        <el-form :model="form" ref="form" label-width="100px" class="search-form">
          <div class="search-item">
            <span class="input-lable registerTime">查询时间段</span>
            <el-date-picker v-model="form.startdate" type="date" placeholder="选择日期"  value-format="yyyy-MM-dd"></el-date-picker>
            <span class="separator">~</span>
            <el-date-picker v-model="form.enddate" type="date" placeholder="选择日期"  value-format="yyyy-MM-dd"></el-date-picker>
          </div>
          <div class="search-item">
            <span class="input-lable">所在地区</span>
            <el-cascader :options="addressOptions"  v-model="regions" :show-all-levels="false" :clearable="true" :props="addressProps" :change-on-select="true" @change="changeCity()"></el-cascader>
          </div>
          <div class="search-item">
            <el-button type="primary" class="search-btn" @click="search()">查询</el-button>
          </div>
        </el-form>
      </div>
      <div class="rechargeAmount-main-bottom">
        <el-table class="new-Member-table" :data="tableData" border stripe style="width: 100%" v-loading="loading">
          <el-table-column  prop="companyname" label="企业名称" align="center">
          </el-table-column>
          <el-table-column  prop="city" label="所在地区" align="center">
          </el-table-column>
          <el-table-column  label="充值金额(元)" align="center">
            <template slot-scope="scope">
              <span class="setColor">{{scope.row.rechargenum}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="充值类型" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.rechargetype | filterRechargeType}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="充值时间" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.recharge}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="total, prev, pager, next, jumper" :total="total" :current-page="currentPage" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script src="./rechargeAmount.js">
</script>

<style scoped src="./rechargeAmount.css">
</style>



